import IconHotRankNo1 from '@/components/icon/IconHotRankNo1';
import IconHotRankNo2 from '@/components/icon/IconHotRankNo2';
import IconHotRankNo3 from '@/components/icon/IconHotRankNo3';

import { hotRank } from '@/services/api/api-tophub-hotrank';
import { RedoOutlined } from '@ant-design/icons';
import { ProCard, ProColumns, ProTable } from '@ant-design/pro-components';
import { ActionType } from '@ant-design/pro-table';
import { Space, Tooltip } from 'antd/lib';
import dayjs from 'dayjs';
import moment from 'moment';
import React, { useRef, useState } from 'react';
import { useAccess } from 'umi';
import DrawerHotRankDetails from './DrawerHotRankDetails';

interface TableHotRankProps {
  hotIcon: JSX.Element;
  hotName: string;
  hotType: number;
  hotCity: number;
  onRefurbish: () => void;
}

const TableHotRank: React.FC<TableHotRankProps> = ({
  hotIcon,
  hotName,
  hotType,
  hotCity,
  onRefurbish,
}) => {
  const [time, setTime] = useState(() => Date.now());

  const access = useAccess();
  const actionRef = useRef<ActionType>();

  const columns: ProColumns<TophubHotRankData.HotRank>[] = [
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          排序
        </span>
      ),
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
      align: 'center',
      render: (dom, entity, index, action) => {
        if (index == 0) {
          return <IconHotRankNo1 width={18} height={18} />;
        } else if (index == 1) {
          return <IconHotRankNo2 width={18} height={18} />;
        } else if (index == 2) {
          return <IconHotRankNo3 width={18} height={18} />;
        } else {
          return dom;
        }
      },
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          热点
        </span>
      ),
      dataIndex: 'name',
      align: 'center',
      copyable: true,
      ellipsis: true,
      width: '45%',
      render: (dom, entity, index, action) => (
        <DrawerHotRankDetails
          dom={dom}
          hotIcon={hotIcon}
          hotName={hotName}
          hotType={hotType}
          hotCity={hotCity}
          hotId={entity.id}
          onRefurbish={function (): void {
          }}
        />
      ),
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          时长/h
        </span>
      ),
      dataIndex: 'onlineDuration',
      align: 'center',
      render: (dom, entity, index, action) => {
        console.log('=================', hotName, entity.name, entity.onlineDuration);

        var duration = moment.duration(moment(entity.executeTime).diff(moment(entity.insertTime)));

        console.log('===', duration.asHours());

        return <>{duration.asHours().toFixed(2)}</>;
      },
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          热度
        </span>
      ),
      dataIndex: 'heatIndex',
      align: 'center',
      hideInTable: hotType == 4 && hotCity === 1,
      render: (dom, entity, index, action) => (
        <a href={entity.url} target="_blank">
          {(entity.heatIndex / 10000).toFixed(2)}万
        </a>
      ),
    },
    {
      title: (
        <span
          style={{
            color: '#99a3b7',
            fontSize: 12,
            textAlign: 'center',
            fontWeight: 'normal',
          }}
        >
          媒体
        </span>
      ),
      dataIndex: 'author',
      align: 'center',
      render: (dom, entity, index, action) => entity.author,
    },
  ];

  return (
    <ProCard
      layout="center"
      bordered={false}
      headStyle={{}}
      title={
        <>
          <Space align={'start'}>
            {hotIcon}
            {hotName}
          </Space>
        </>
      }
      bodyStyle={{
        padding: 8,
      }}
      extra={
        <Space>
          {`上次更新时间：${dayjs(time).format('HH:mm:ss')}`}
          <Tooltip title="刷新">
            <RedoOutlined
              onClick={() => {
                actionRef?.current?.reset();
              }}
            />
          </Tooltip>
        </Space>
      }
      style={{
        backgroundImage: 'url(https://wisky.wengegroup.com/assets/hot_bg.232cb7c9.svg)',
        backgroundSize: 'cover',
      }}
    >
      <ProTable<TophubHotRankData.HotRank>
        columns={columns}
        actionRef={actionRef}
        rowKey="id"
        // polling={2000}
        dateFormatter="id"
        defaultSize={'small'}
        search={false}
        options={false}
        // options={{
        //   density: false,
        //   setting: false,
        // }}
        pagination={false}
        scroll={{
          y: 395,
        }}
        ghost
        request={async () => {
          const response = await hotRank({ hotType, isCity: hotCity });

          if (response.code == 0) {
            setTime(Date.now());
            return {
              data: response.data,
              success: true,
              total: response.data.length,
            };
          } else {
            return {
              data: [],
              success: false,
              total: 0,
            };
          }
        }}
      />
    </ProCard>
  );
};

export default TableHotRank;
